<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar title="我的收藏" left-arrow @click-left="$router.back()">
    </van-nav-bar>
    <!-- 列表 -->
    <van-swipe-cell v-for="item in star" :key="item.id">
      <!-- 注意：自定义组件上不能绑定原生事件，因此需要借助.native才可以 -->
      <newsItem :post="item" @click.native="toDetail(item.id)"></newsItem>
      <template #right>
        <van-button square text="删除" type="danger" 
        class="delete-button" @click="delFn(item.id)" />
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
import { starList } from "@/api/user";
import newsItem from "@/components/newsItem.vue";
import { post_star } from "@/api/news"
export default {
  components: { newsItem },
  data() {
    return {
      star: [],
    };
  },
  created() {
    this.getStarList()
  },
  methods: {
    // 跳转到文章详情
    toDetail(id){
      this.$router.push({
        path: "/articleDetail",
        query: {
          id
        }
      })
    },
    //   获取收藏列表
      getStarList(){
        starList().then((res) => {
            this.star = res.data.data;
        });
      },
      // 取消收藏
      delFn(id){
          post_star(id).then(res=>{
            //   console.log(36,res);
              if(res.data.message == "取消成功"){
                //   更新浏览器中显示的列表数据
                this.getStarList()
                // 提示用户成功了
                this.$toast.success(res.data.message)
              }else{
                this.$toast.fail(res.data.message)
              }
          })
      }
  }
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  border-bottom: 1px solid #ddd;
}
.van-button{
    height: 100%;
}
</style>